<template>
    <el-dialog
        :title="title"
        custom-class="el-dialog-600"
        :visible.sync="visible"
    >
        <el-form
            :model="form"
            :rules="rules"
            :ref="formRef"
            :size="$formSize"
            label-width="90px"
        >
            <el-form-item label="用户名" prop="account">
                <el-col :span="23">
                    <el-input
                        clearable
                        v-model="form.account"
                        auto-complete="off"
                        :disabled="id ? true : false"
                        placeholder="请输入用户名"
                    ></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="密码" prop="password" v-if="!id">
                <el-col :span="23">
                    <el-input
                        type="password"
                        clearable
                        v-model="form.password"
                        auto-complete="off"
                        placeholder="请输入密码"
                    ></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="角色" prop="role_id">
                <el-select
                    v-model="form.role_id"
                    clearable
                    placeholder="请选择用户角色"
                >
                    <el-option
                        v-for="item in roleList"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id"
                    ></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="手机" prop="phone">
                <el-col :span="23">
                    <el-input
                        clearable
                        v-model="form.phone"
                        auto-complete="off"
                    ></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
                <el-col :span="23">
                    <el-input
                        clearable
                        v-model="form.name"
                        auto-complete="off"
                    ></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="Email" prop="email">
                <el-col :span="23">
                    <el-input
                        clearable
                        v-model="form.email"
                        auto-complete="off"
                    ></el-input>
                </el-col>
            </el-form-item>
            <el-form-item label="头像" prop="avatarUrl">
                <Uploader
                    v-model="form.avatarUrl"
                    :on-success="thumbUpload"
                    :on-remove="removeThumbUpload"
                />
            </el-form-item>
            <el-form-item label="状态" prop="status">
                <el-col :span="23">
                    <el-radio
                        clearable
                        v-model="form.status"
                        v-for="item in statusRadio"
                        :key="item.id"
                        :label="item.id"
                    >
                        {{ item.name }}
                    </el-radio>
                </el-col>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button :size="$btnSize" @click="visible = false"
                >取 消</el-button
            >
            <el-button
                type="primary"
                :size="$btnSize"
                :loading="loading"
                @click="onSubmit"
            >
                确 定
            </el-button>
        </div>
    </el-dialog>
</template>

<script>
import Options from "@/global/local-data/system";
import { adminUser as Api } from "api";

export default {
    props: {
        id: {
            type: [Number, String],
        },
    },
    data() {
        // 手机号验证
        const checkPhone = (rule, value, callback) => {
            if (this.$validate.isPhone(value) || value == "") {
                callback();
            } else {
                return callback(new Error("请输入正确的手机号"));
            }
        };

        // 电子邮件验证
        const checkEmail = (rule, value, callback) => {
            if (this.$validate.isEmail(value) || value == "") {
                callback();
            } else {
                return callback(new Error("请输入正确的电子邮件"));
            }
        };

        return {
            // 状态
            loading: false, // 按钮等待
            visible: false, // 弹窗开关
            title: "", // 标题

            formRef: "formRef", // ref
            roleList: [], // 角色列表
            statusRadio: Options.user.statusRadio,

            form: {
                account: "",
                password: "",
                name: "",
                avatarUrl: "",
                email: "",
                phone: "",
                role_id: "",
                status: 0,
            },

            // 验证
            rules: {
                role_id: [
                    {
                        required: true,
                        message: "请选择角色",
                        trigger: "change",
                    },
                ],
                account: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "change",
                    },
                    {
                        min: 5,
                        max: 12,
                        message: "长度5到12个字符",
                        trigger: "change",
                    },
                ],
                password: [
                    {
                        required: true,
                        message: "请输入密码",
                        trigger: "change",
                    },
                    {
                        min: 8,
                        max: 16,
                        message: "长度8到16个字符",
                        trigger: "change",
                    },
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入手机号码",
                        trigger: "change",
                    },
                    { validator: checkPhone, trigger: "change" },
                ],
                name: [
                    {
                        required: true,
                        message: "请输入用户名",
                        trigger: "change",
                    },
                ],
                email: [{ validator: checkEmail, trigger: "change" }],
            },
        };
    },
    methods: {
        init() {
            this.title = this.id ? "编辑" : "新增";

            this.getRoleList();

            if (this.id) this.getById();
        },

        async getRoleList() {
            const { code, data } = await this.$axios.get(Api.getRoleList);

            if (code === 200) {
                this.roleList = data;
            }
        },

        async getById() {
            const { code, data } = await this.$axios.get(Api.getById, {
                params: { id: this.id },
            });

            if (code === 200) {
                this.form = {
                    role_id: data.role_id,
                    account: data.account,
                    phone: data.phone,
                    avatarUrl: data.avatar || "",
                    email: data.email || "",
                    status: data.status,
                    name: data.name,
                };
            }
        },
        thumbUpload(fileStr) {
            this.form.avatarUrl = fileStr;
        },

        removeThumbUpload(fileStr) {
            this.form.avatarUrl = fileStr;
        },

        async onSubmit() {
            this.$refs[this.formRef].validate((valid) => {
                if (valid) {
                    this.loading = true;
                }
            });
            if (this.loading) {
                let url = this.id ? Api.update : Api.add;
                let params = {
                    role_id: this.form.role_id,
                    account: this.form.account,
                    password: this.form.password,
                    name: this.form.name,
                    avatarUrl: this.form.avatarUrl,
                    email: this.form.email,
                    phone: this.form.phone,
                    status: this.form.status,
                };

                if (this.id) params.id = this.id;

                const { code, msg, data } = await this.$axios.post(url, params);

                if (code === 200) {
                    this.$msg.success(msg);
                    this.$parent.getList();

                    this.visible = false;
                } else {
                    this.$msg.error(msg ? msg : data);
                }

                this.loading = false;
            }
        },
    },
    watch: {
        // 监听弹窗开关状态来控制组件的初始化
        visible(status) {
            if (status) {
                this.init();
            } else {
                this.$refs[this.formRef].resetFields();
            }
        },
    },
};
</script>